<template>
  <div id="app">
    <div id="nav">
      <span><router-link to="/index">index</router-link></span>
      <span><router-link to="/index2">index2</router-link></span>
        <span><router-link to="/index3">index3</router-link></span>
        <span><router-link to="/index4">index4</router-link></span>
        <span><router-link to="/index5">index5</router-link></span>
        <span><router-link to="/index6">index6</router-link></span>
        <span><router-link to="/login">登陆页面</router-link></span>
         <span><router-link to="/chacao">插槽</router-link></span>
    </div>
    <router-view/>
    <!-- 动态组件&异步组件 -->
    <!-- <component :is="currentView"></component> -->
    <!-- 
      非活动组件将被缓存 上面的点击切换并不会缓存加上 keep-alive
    使用就是把需要缓存的包裹在keep-alive中
    -->
    <!-- <keep-alive>
      <component :is="currentView" keep-alive></component>
    </keep-alive>
    <button @click="zujianA">组件切换为a</button>
    <button @click="zujianB">组件切换为b</button> -->
  </div>
</template>

<script>
// 引入组件
import zujianA from "./views/zujian/zujianA";
import zujianB from "./views/zujian/zujianB";
export default {
  data() {
    return {
      currentView: zujianA //component是动态组件，指向组件A也就是zujianA
    };
  },
  components: {
    zujianA,
    zujianB
  },
  methods: {
    // 点击a按钮，组件切换为a
    zujianA() {
      this.currentView = zujianA;
    },
    zujianB() {
      this.currentView = zujianB;
    }
  }
};
</script>
<style lang="less">
span{margin-right: 30px;}
</style>